<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>OA系统</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" href="{{ url('images/favicon.png') }}" type="image/png">
	<link rel="stylesheet" href="{{ url('css/bootstrap.min.css') }}">
	<link rel="stylesheet" href="{{ url('css/font-awesome.min.css') }}">
	<link rel="stylesheet" href="{{ url('css/adapt.css') }}">
	<link rel="stylesheet" href="{{ url('css/main.css') }}">
	<link rel="stylesheet" href="{{ url('js/lightbox/css/lightbox.css') }}">
	<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>	
	<script type="text/javascript">
    	var HOME_URL = "{{ url('/') }}";
	</script>
</head>
<body id="framework">
	<table class="table">
		<tbody>
			<tr>
				<th width="120">合同号</th>
				<td>{{ $data->contract_no }}</td>
			</tr>
			<tr>
				<th>发票类型</th>
				<td>{{ config('system.invoice_type')[$data->invoice_type] }}</td>
			</tr>
			<tr>
				<th>合同图片</th>
				<td>
		            <ul class="contract-imgs">
		                <li v-for="item in contractImgs">
		                    <a href="@{{ item.src }}" class="thumbnail" data-lightbox="contracts">
		                        @{{{ item.img }}}
		                    </a>
		                </li>
		            </ul>
				</td>
			</tr>
			<tr>
				<th>发票回执</th>
				<td>
		            <ul class="contract-imgs">
		                <li v-for="item in receiptImgs">
		                    <a href="@{{ item.src }}" class="thumbnail" data-lightbox="receipts">
		                        @{{{ item.img }}}
		                    </a>
		                </li>
		            </ul>
				</td>
			</tr>
			<tr>
				<th>发票状态</th>
				<td>
	            @if($data->invoice_status == 1)
	                <span class="label label-success">发票已开</span>
	            @endif
				</td>
			</tr>
			<tr>
				<th>回执状态</th>
				<td>
	            @if($data->invoice_receipt_status == 1)
	                <span class="label label-success">回执已收</span>
	            @endif
				</td>
			</tr>
			<tr>
				<th>备注</th>
				<td>{{ $data->remark }}</td>
			</tr>
		</tbody>
	</table>
</body>
<script src="{{ url('js/vue.min.js') }}"></script>
<script src="{{ url('js/lightbox/js/lightbox.min.js') }}"></script>
<script>
	lightbox.option({'resizeDuration': 200,'fadeDuration': 100})

	// 合同和回执图片
	var contract = {!! $data ?: '{}' !!};

	vm  = new Vue({
	    el: '#framework',
	    data: {
	        contract: contract
	    },
	    computed: {
	        contractImgs: function() {
	            var items = this.contract.contract.split('-');
	            return items.map(function(item, index) {
	                return {
	                    src: HOME_URL + '/' + item,
	                    img: '<img src="' + HOME_URL + '/' + item + '">'
	                };
	            });
	        },
	        receiptImgs: function() {
	            var items = this.contract.invoice_receipt.split('-');
	            return items.map(function(item, index) {
	                return {
	                    src: HOME_URL + '/' + item,
	                    img: '<img src="' + HOME_URL + '/' + item + '">'
	                };
	            });
	        }
	    }
	})
</script>
</html>